<template>
  <div class="container">
    <!-- box1 -->
    <div class="box1">
      <div class="box1-left">
        <div class="box1-1">
          <div>使 用 滴 答 清 单</div>
          <div>规 划 好 每 一 天</div>
        </div>
        <span class="box1-2"
          >从记录到管理，滴答清单能帮你把一切打理得井井有条，你可以充分享受高效生活的乐趣。</span
        >
      </div>
      <div class="box1-right">
        <el-image
          src="https://cncdn.dida365.com/sites/res/features/common/images@2/intro.png"
        ></el-image>
      </div>
    </div>
    <!-- box2 -->
    <div class="box2">
      <div class="box2-left">
        <el-image class="box2-image" :src="Box2ImageList[Box2Index]"></el-image>
      </div>
      <div class="box2-right">
        <div class="box2-text1">方便且快速地记录大小事务</div>
        <ul class="box2-ul">
          <li
            class="box2-li"
            v-for="(item, index) in Box2List"
            :key="index"
            @click="changeBox2Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box2-svg"
            >
              <path class="box2-p" :d="item.path"></path>
              <path
                v-show="item.id === 2"
                class="box2-p"
                d="M28 17.9c0-3.8-3.6-6.8-7.7-6.8-4.3 0-7.7 3-7.7 6.8s3.4 6.8 7.7 6.8c.9 0 1.9-.2 2.7-.5l1.9 1.1c.1.1.3 0 .3-.1V25l-.5-1.7c1.9-1.4 3.3-3.4 3.3-5.4zm-10.2-.6c-.6 0-1-.5-1-1.1 0-.6.5-1.1 1-1.1s1 .5 1 1.1c0 .6-.5 1.1-1 1.1zm5.2 0c-.6 0-1-.5-1-1.1 0-.6.5-1.1 1-1.1s1 .5 1 1.1c0 .6-.4 1.1-1 1.1z"
              ></path>
            </svg>
            <div class="box2-ul-text">
              <span class="box2-ul-text1">{{ item.text1 }}</span>
              <span class="box2-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- box3 -->
    <div class="box3">
      <div class="box3-left">
        <div class="box3-text1">确保你不会错过任何提醒</div>
        <ul class="box3-ul">
          <li
            class="box3-li"
            v-for="(item, index) in Box3List"
            :key="index"
            @click="changeBox3Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box3-svg"
            >
              <path class="box3-p" :d="item.path"></path>
            </svg>
            <div class="box3-ul-text">
              <span class="box3-ul-text1">{{ item.text1 }}</span>
              <span class="box3-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="box3-right">
        <el-image class="box3-image" :src="Box3ImageList[Box3Index]"></el-image>
      </div>
    </div>
    <!-- box4 -->
    <div class="box2">
      <div class="box2-left">
        <el-image class="box2-image" :src="Box4ImageList[Box4Index]"></el-image>
      </div>
      <div class="box2-right">
        <div class="box2-text1">理清一切，不再迷茫接下来做什么</div>
        <ul class="box2-ul">
          <li
            class="box2-li"
            v-for="(item, index) in Box4List"
            :key="index"
            @click="changeBox4Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box2-svg"
            >
              <path class="box2-p" :d="item.path"></path>
            </svg>
            <div class="box2-ul-text">
              <span class="box2-ul-text1">{{ item.text1 }}</span>
              <span class="box2-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- box5 -->
    <div class="box3">
      <div class="box3-left">
        <div class="box3-text1">清晰直观地呈现所有日程</div>
        <ul class="box3-ul">
          <li
            class="box3-li"
            v-for="(item, index) in Box5List"
            :key="index"
            @click="changeBox5Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box3-svg"
            >
              <path class="box3-p" :d="item.path"></path>
            </svg>
            <div class="box3-ul-text">
              <span class="box3-ul-text1">{{ item.text1 }}</span>
              <span class="box3-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="box3-right">
        <el-image class="box3-image" :src="Box5ImageList[Box5Index]"></el-image>
      </div>
    </div>
    <!-- box6 -->
    <div class="box2">
      <div class="box2-left">
        <el-image class="box2-image" :src="Box6ImageList[Box6Index]"></el-image>
      </div>
      <div class="box2-right">
        <div class="box2-text1">在沉浸的环境中专注做事</div>
        <ul class="box2-ul">
          <li
            class="box2-li"
            v-for="(item, index) in Box6List"
            :key="index"
            @click="changeBox6Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box2-svg"
            >
              <path class="box2-p" :d="item.path"></path>
            </svg>
            <div class="box2-ul-text">
              <span class="box2-ul-text1">{{ item.text1 }}</span>
              <span class="box2-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- box7 -->
    <div class="box3">
      <div class="box3-left">
        <div class="box3-text1">与同事们协作并跟踪进展</div>
        <ul class="box3-ul">
          <li
            class="box3-li"
            v-for="(item, index) in Box7List"
            :key="index"
            @click="changeBox7Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box3-svg"
            >
              <path class="box3-p" :d="item.path"></path>
            </svg>
            <div class="box3-ul-text">
              <span class="box3-ul-text1">{{ item.text1 }}</span>
              <span class="box3-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="box3-right">
        <el-image class="box3-image" :src="Box7ImageList[Box7Index]"></el-image>
      </div>
    </div>
    <!-- box8 -->
    <div class="box2">
      <div class="box2-left">
        <el-image class="box2-image" :src="Box8ImageList[Box8Index]"></el-image>
      </div>
      <div class="box2-right">
        <div class="box2-text1">记录一点一滴的进步</div>
        <ul class="box2-ul">
          <li
            class="box2-li"
            v-for="(item, index) in Box8List"
            :key="index"
            @click="changeBox8Li(index)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              class="box2-svg"
            >
              <path class="box2-p" :d="item.path"></path>
            </svg>
            <div class="box2-ul-text">
              <span class="box2-ul-text1">{{ item.text1 }}</span>
              <span class="box2-ul-text2" v-show="item.show">{{
                item.text2
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 倒数第二底部 -->
    <div class="foot1">
      <div class="foot1-text1">无论你在哪儿，滴答清单都能伴你左右</div>
      <div class="foot1-text2">
        你可以在电脑、手机甚至智能手表中使用滴答清单管理一切，你的所有任务都能在
        10+ 个平台间无缝同步。
      </div>
      <el-button class="foot1-button">下载滴答清单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "FunctionIntroduction",
  components: {},
  data() {
    return {
      // box2
      Box2List: [
        {
          id: 1,
          path: "M13 23.3c-4.8-.9-8.5-5.2-8.5-10.3h3c0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5h3c0 5.1-3.7 9.4-8.5 10.3V26c0 1.1-.9 2-2 2s-2-.9-2-2v-2.7zM15 2c2.8 0 5 2.2 5 5v6c0 2.8-2.2 5-5 5s-5-2.2-5-5V7c0-2.8 2.2-5 5-5z",
          text1: "语音输入",
          text2:
            "当你的脑海中突然出现某个想法，但又不方便打字时，语音输入就是最佳帮手，只需要按住「+」图标，说说话就能快速记录。",
          show: false,
        },
        {
          id: 2,
          path: "M14.4 12.4c1.6-1.4 3.8-2.2 6.2-2.2h.2C20.1 6.6 16.2 4 11.5 4 6.3 4 2 7.5 2 11.9c0 2.5 1.5 4.7 3.8 6.2L5 20.3c0 .1 0 .3.2.3h.2l2.7-1.4c1.2.2 2.1.5 3.3.5h.9c-.2-.7-.4-1.3-.4-2 0-2.1 1-4 2.5-5.3zm.3-4.5c.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1s-1.1-.5-1.1-1.1c0-.6.5-1.1 1.1-1.1zm-6.1 2.2c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1z",
          text1: "保存微信消息为任务",
          text2:
            "你可能已经习惯在微信里和同事聊工作、和客户对接、或向朋友约饭，不妨试试将微信消息发送到滴答清单，将它保存为任务。",
          show: false,
        },
        {
          id: 3,
          path: "M7.6 6h14.9c.9 0 1.2.1 1.5.3.3.2.6.4.8.8.1.2.2.6.2 1.5v12.9c0 .9-.1 1.2-.3 1.5-.2.3-.4.6-.8.8-.3.2-.6.3-1.5.3H7.6c-.9 0-1.2-.1-1.5-.3-.3-.2-.6-.4-.8-.8-.2-.3-.3-.7-.3-1.6V8.6c0-.9.1-1.3.3-1.6.1-.3.4-.6.7-.7.3-.2.7-.3 1.6-.3zm7.4 8.4L7.7 8 6.3 9.5l8 7c.4.3.9.3 1.3 0l8-7L22.3 8 15 14.4z",
          text1: "转发邮件为任务",
          text2:
            "如果你的工作邮件来不及立即处理，就动动手指将它转发给滴答清单吧，我们会确保你不会遗忘这封邮件。",
          show: false,
        },
        {
          id: 4,
          path: "M7.6 5h3.9c.9 0 1.2.1 1.5.3.3.2.6.4.8.8s.2.6.2 1.5v3.9c0 .9-.1 1.2-.3 1.5s-.4.6-.8.8-.6.2-1.5.2H7.6c-.9 0-1.2-.1-1.5-.3s-.7-.4-.8-.7c-.2-.3-.3-.7-.3-1.6V7.6c0-.9.1-1.3.3-1.6.1-.3.4-.6.7-.7.3-.2.7-.3 1.6-.3zm14.7-.1L25 7.6c.7.7.8 1 1 1.4.1.4.1.7 0 1.1-.1.4-.3.6-.9 1.3l-2.7 2.7c-.6.6-.9.8-1.3.9-.4.1-.7.1-1.1 0-.4-.1-.6-.3-1.3-.9L16 11.4c-.6-.6-.8-.9-.9-1.3-.1-.4-.1-.7 0-1.1.1-.4.3-.6.9-1.3L18.7 5c.6-.7.9-.8 1.3-1 .4-.1.7-.1 1.1 0 .3.2.6.3 1.2.9zM7.6 16h3.9c.9 0 1.2.1 1.5.3.3.2.6.4.8.8.2.3.3.6.3 1.5v3.9c0 .9-.1 1.2-.3 1.5-.2.3-.4.6-.8.8-.3.2-.6.3-1.5.3H7.6c-.9 0-1.2-.1-1.5-.3-.3-.2-.6-.4-.8-.8-.2-.3-.3-.7-.3-1.6v-3.9c0-.9.1-1.2.3-1.5.2-.3.4-.6.8-.8.2-.1.6-.2 1.5-.2zm11 0h3.9c.9 0 1.2.1 1.5.3.3.2.6.4.8.8.2.3.3.6.3 1.5v3.9c0 .9-.1 1.2-.3 1.5-.2.3-.4.6-.8.8-.3.2-.6.3-1.5.3h-3.9c-.9 0-1.2-.1-1.5-.3-.3-.2-.6-.4-.8-.8-.2-.3-.3-.6-.3-1.5v-3.9c0-.9.1-1.2.3-1.5.2-.3.4-.6.8-.8.2-.2.6-.3 1.5-.3z",
          text1: "Sir,小部件和悬浮球",
          text2:
            "在 iPhone 上启用 Siri 添加任务，然后直接对 Siri 说“在滴答清单中创建去超市买牛奶”，或者在 Android 手机桌面上添加小部件和悬浮球，更快地记录任务。",
          show: false,
        },
      ],
      Box2ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/voice.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/wechat.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/mail.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/widget.png",
      ],
      Box2Index: 0,
      Box2Show: false,
      //box3
      Box3List: [
        {
          id: 1,
          path: "M12 17c-1.2-.9-2-2.4-2-4 0-2.8 2.2-5 5-5s5 2.2 5 5c0 1.6-.8 3.1-2 4v2c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1v-2zm1 4h4c0 1.1-.9 2-2 2s-2-.9-2-2zM6 10H4V7c0-1.7 1.3-3 3-3h3v2H7c-.6 0-1 .4-1 1v3zm18 0V7c0-.6-.4-1-1-1h-3V4h3c1.7 0 3 1.3 3 3v3h-2zM6 20v3c0 .6.4 1 1 1h3v2H7c-1.7 0-3-1.3-3-3v-3h2zm18 0h2v3c0 1.7-1.3 3-3 3h-3v-2h3c.6 0 1-.4 1-1v-3z",
          text1: "智能识别日期",
          text2:
            "如果你不希望花费时间手动设置日期的话，不妨在添加任务时就写下“晚上7点去健身”，滴答清单会自动为你设置日期和提醒。",
          show: false,
        },
        {
          id: 2,
          path: "M8 7V6c0-.6.4-1 1-1s1 .4 1 1v1h10V6c0-.6.4-1 1-1s1 .4 1 1v1c.7.1 1.1.2 1.5.4.5.3.8.6 1.1 1.1.3.5.4 1 .4 2.3v10.3c0 1.3-.1 1.8-.4 2.3-.3.5-.6.9-1.1 1.1-.5.3-1 .4-2.3.4H8.8c-1.3 0-1.8-.1-2.3-.4-.5-.2-.8-.5-1.1-1-.3-.5-.4-1-.4-2.3V10.8c0-1.3.1-1.8.4-2.3.3-.5.6-.8 1.1-1.1.4-.2.8-.3 1.5-.4zm2 7.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5zm5 0c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5zm-5 5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5zm5 0c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5zm5-5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5z",
          text1: "日期与时间段",
          text2:
            "有些日程可能会持续一段时间，比如：3小时的分享会、2天的短期旅行...若你想了解这些事情的持续时间，就为它们设置时间段吧。",
          show: false,
        },
        {
          id: 3,
          path: "M16.1 15v-4.4c0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1V17.2h4.4c.6 0 1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1h-2.2zM4.8 11.5c-.5-.8-.8-1.7-.8-2.6C4 6.2 6.2 4 8.9 4c1.2 0 2.2.4 3.1 1.1.2.1.2.4.1.5 0 .1-.1.1-.2.1-2.8.9-5.2 3-6.3 5.7-.1.2-.3.3-.5.2-.2 0-.3 0-.3-.1zm13.3-6.4c.8-.7 1.9-1.1 3-1.1C23.8 4 26 6.2 26 8.9c0 1-.3 2-.8 2.7-.1.1-.3.2-.5.1-.1 0-.1-.1-.1-.1-1.2-2.8-3.5-4.9-6.4-5.9-.2-.1-.3-.3-.2-.5 0 0 0-.1.1-.1zm1.2 18.6c-1.3.7-2.7 1.1-4.3 1.1-1.5 0-3-.4-4.3-1.1l-1.5 2.7c-.3.6-1.1.8-1.7.4s-.8-1.1-.4-1.7l1.7-2.9c-1.8-1.7-2.9-4-2.9-6.7 0-5.1 4.1-9.2 9.2-9.2s9.2 4.1 9.2 9.2c0 2.6-1.1 5-2.9 6.7l1.7 2.9c.3.6.1 1.3-.4 1.7s-1.3.1-1.7-.4l-1.7-2.7z",
          text1: "多闹钟和持续响铃",
          text2:
            "你可以为那些重要的任务设置多个提醒，或者开启“持续响铃”，以进一步确保不会错过它们。",
          show: false,
        },
        {
          id: 4,
          path: "M15.3 27.5c-.2.1-.4.1-.6 0-.5-.4-.9-.6-1.1-.8C7.9 22.4 5 18.1 5 14 5 8.5 9.5 4 15 4s10 4.5 10 10c0 4.1-2.8 8.3-8.4 12.6-.3.2-.7.5-1.3.9zM15 18c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4z",
          text1: "位置提醒",
          text2:
            "如果你习惯早上一到办公室先泡杯咖啡的话，就可以设置一个位置提醒。以后一旦你到达办公室，滴答清单都会提醒你去泡咖啡。",
          show: false,
        },
        {
          id: 5,
          path: "M14.8 6.8h-.3c-4.2 0-7.7 3.5-7.7 7.7 0 2.8 1.5 5.3 3.9 6.7l-1.3 2.2c-3.1-1.8-5.1-5.2-5.1-8.9C4.3 8.9 9 4.3 14.5 4.3h3.4c1.1 0 1.7 1.3.9 2.1L15 10.2l-1.8-1.8 1.6-1.6zm.4 15.7h.3c4.2 0 7.7-3.5 7.7-7.7 0-2.8-1.5-5.3-3.9-6.7l1.3-2.2c3.1 1.8 5.1 5.2 5.1 8.9C25.7 20.4 21 25 15.5 25h-3.4c-1.1 0-1.7-1.3-.9-2.1l3.8-3.8 1.8 1.8-1.6 1.6z",
          text1: "重复任务",
          text2:
            "不管是“每周二、周四去夜跑”，还是“每个法定工作日打卡”，滴答清单丰富的重复规则都能帮你实现。",
          show: false,
        },
      ],
      Box3ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/nlp.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/duration.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/multi-reminders.png",
        "	https://cncdn.dida365.com/sites/res/features/dida/feature@2/location.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/repeat.png",
      ],
      Box3Index: 0,
      Box3Show: false,
      //box4
      Box4List: [
        {
          id: 1,
          path: "M4.5 19h21c.3 0 .5.2.5.5v.1l-.6 2.8c-.2.9-1 1.6-2 1.6h-17c-1 0-1.8-.7-2-1.6L4 19.6c-.1-.3.1-.5.5-.6-.1 0 0 0 0 0zm.5-3V8c0-1.1.9-2 2-2h6l2 2h8c1.1 0 2 .9 2 2v6c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1z",
          text1: "文件夹，清单，任务和检查事项",
          text2:
            "当你记录的事情越来越多，那么合理的组织就尤为重要了。滴答清单提供了四个层级，你可以根据任务的分类进行整理，将它们移动到“工作”、“个人”或“家庭”里去。",
          show: false,
        },
        {
          id: 2,
          path: "M20 18.9c-.9-.6-1.5-1.7-1.5-2.9 0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5c0 1.2-.6 2.2-1.5 2.9V20c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-1.1zM6.5 9C5.7 9 5 8.3 5 7.5S5.7 6 6.5 6h17c.8 0 1.5.7 1.5 1.5S24.3 9 23.5 9h-17zm0 7c-.8 0-1.5-.7-1.5-1.5S5.7 13 6.5 13h7c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-7zm0 7c-.8 0-1.5-.7-1.5-1.5S5.7 20 6.5 20h9c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-9zm15-1h1c.6 0 1 .4 1 1s-.4 1-1 1h-1c-.6 0-1-.4-1-1s.4-1 1-1z",
          text1: "智能清单和过滤器",
          text2:
            "你能在“今天”、“明天”等智能清单里集中查看符合条件任务；也可以自定义筛选规则，从众多任务中找到你真正想要关注的那些。",
          show: false,
        },
        {
          id: 3,
          path: "M7 5.7l6-1.6c.4-.2 1-.1 1.4.2L25 10.4c1 .6 1.3 1.8.7 2.7l-1.6 2.8c-.1-.1-.1-.2-.2-.3L15 6.7c-.7-.7-1.7-1.1-2.7-1.1H7zm-3 10v-7c0-.7.7-1.4 1.5-1.4h7c.5 0 1 .2 1.4.6l8.7 8.7c.8.8.8 2 0 2.8l-6.5 6.5c-.8.8-2 .8-2.8 0l-8.7-8.7c-.4-.4-.6-.9-.6-1.5zm7.6-.8c.9-.9.9-2.2 0-3.1-.9-.9-2.2-.9-3.1 0-.9.9-.9 2.2 0 3.1s2.2.8 3.1 0z",
          text1: "标签",
          text2:
            "在使用清单分类的基础上，你还可以为任务打上标签，用来标识“情境”、“状态”或其他，以便更加灵活的进行筛选。",
          show: false,
        },
        {
          id: 4,
          path: "M8.5 21c.8 0 1.5.7 1.5 1.5S9.3 24 8.5 24 7 23.3 7 22.5 7.7 21 8.5 21zm0-2c-.8 0-1.5-.7-1.5-1.5v-10C7 6.7 7.7 6 8.5 6s1.5.7 1.5 1.5v10c0 .8-.7 1.5-1.5 1.5zm7 2c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm0-2c-.8 0-1.5-.7-1.5-1.5v-10c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v10c0 .8-.7 1.5-1.5 1.5zm7 2c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm0-2c-.8 0-1.5-.7-1.5-1.5v-10c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v10c0 .8-.7 1.5-1.5 1.5z",
          text1: "多优先级",
          text2:
            "为了保证你将精力花在重要的事情上，滴答清单提供了四个优先级，你可以根据事情的重要程度进行分类。",
          show: false,
        },
        {
          id: 5,
          path: "M12.5 8h12c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-12c-.8 0-1.5-.7-1.5-1.5S11.7 8 12.5 8zm0 6h12c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-12c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5zm0 6h12c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-12c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5zm-6.4.4V7c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v17c0 1.3-1.6 2-2.6 1.1l-4.6-4.6c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l2.1 2z",
          text1: "排序",
          text2:
            "滴答清单共支持6种排序方式，不管是按时间顺序查看、还是按重要程度查看，你都能以你希望的方式来排序任务。",
          show: false,
        },
        {
          id: 6,
          path: "M22.2 20.6l3.1 3.1c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0L20 22.6c-1.7 1.2-3.8 1.9-6 1.9-5.8 0-10.5-4.7-10.5-10.5S8.2 3.5 14 3.5 24.5 8.2 24.5 14c0 2.5-.9 4.8-2.3 6.6zm-8.2.9c4.1 0 7.5-3.4 7.5-7.5S18.1 6.5 14 6.5 6.5 9.9 6.5 14s3.4 7.5 7.5 7.5z",
          text1: "搜索",
          text2: "使用搜索功能精准查询任务。",
          show: false,
        },
      ],
      Box4ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/task.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/smart-list.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/tag.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/multi-priority.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/sort.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/search.png",
      ],
      Box4Index: 0,
      Box4Show: false,
      //box5
      Box5List: [
        {
          id: 1,
          path: "M8 7V6c0-.6.4-1 1-1s1 .4 1 1v1h10V6c0-.6.4-1 1-1s1 .4 1 1v1c.7.1 1.1.2 1.5.4.5.3.8.6 1.1 1.1.3.5.4 1 .4 2.3v10.3c0 1.3-.1 1.8-.4 2.3-.3.5-.6.9-1.1 1.1-.5.3-1 .4-2.3.4H8.8c-1.3 0-1.8-.1-2.3-.4-.5-.2-.8-.5-1.1-1-.3-.5-.4-1-.4-2.3V10.8c0-1.3.1-1.8.4-2.3s.6-.8 1.1-1.1c.4-.2.8-.3 1.5-.4zm1 4c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1H9zm0 4c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1H9zm5-4c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1h-2zm5 0c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1h-2zm-5 4c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1h-2zm5 0c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1h-2zM9 19c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1H9zm5 0c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1h-2z",
          text1: "多种日历视图",
          text2:
            "在月视图中概览全局，扫一眼即可知晓何时忙碌、何时空闲；在日、3日、周视图中查看时间轴，即刻掌握各天的日程。",
          show: false,
        },
        {
          id: 2,
          path: "M8 7V6c0-.6.4-1 1-1s1 .4 1 1v1h10V6c0-.6.4-1 1-1s1 .4 1 1v1c.7.1 1.1.2 1.5.4.5.3.8.6 1.1 1.1.3.5.4 1 .4 2.3v10.3c0 1.3-.1 1.8-.4 2.3-.3.5-.6.9-1.1 1.1-.5.3-1 .4-2.3.4H8.8c-1.3 0-1.8-.1-2.3-.4-.5-.2-.8-.5-1.1-1-.3-.5-.4-1-.4-2.3V10.8c0-1.3.1-1.8.4-2.3s.6-.8 1.1-1.1c.4-.2.8-.3 1.5-.4zm3 15c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-2c0-3.3-2.7-6-6-6v2c2.2 0 4 1.8 4 4h2zm4 0c0-5.5-4.5-10-10-10v2c4.4 0 8 3.6 8 8h2z",
          text1: "订阅日历",
          text2:
            "如果你需要同时管理任务和日程，可以考虑将日历事件也一并集成到滴答清单中。你可以方便的授权Google日历或订阅URL，集中管理日程并获得提醒。",
          show: false,
        },
        {
          id: 3,
          path: "M8 7V6c0-.6.4-1 1-1s1 .4 1 1v1h10V6c0-.6.4-1 1-1s1 .4 1 1v1c.7.1 1.1.2 1.5.4.5.3.8.6 1.1 1.1.3.5.4 1 .4 2.3v10.3c0 1.3-.1 1.8-.4 2.3-.3.5-.6.9-1.1 1.1-.5.3-1 .4-2.3.4H8.8c-1.3 0-1.8-.1-2.3-.4-.5-.2-.8-.5-1.1-1-.3-.5-.4-1-.4-2.3V10.8c0-1.3.1-1.8.4-2.3.3-.5.6-.8 1.1-1.1.4-.2.8-.3 1.5-.4zm10.9 7.4c-.5.5-1.1 1-1.7 1.5-.5-.9-.9-1.8-1.2-2.8h2.8v1.2h1.9v-2.9h-4.2c.1-.4.2-.7.3-1.1l-2-.3c-.1.5-.2 1-.4 1.5H9.9v2.9h1.8v-1.2h2.1c-1 1.9-2.5 3.2-4.7 3.9.4.4 1 1.1 1.3 1.5.5-.2 1-.5 1.5-.8V19c0 .6-.5 1-.8 1.1.3.4.7 1.1.8 1.6.4-.3 1-.5 4.6-1.4-.1-.4-.1-1.1-.1-1.6l-2.6.6v-2.9c.5-.5.9-1 1.2-1.5 1.1 2.8 2.6 5.1 4.9 6.5.3-.5.9-1.2 1.3-1.5-1.1-.6-2.1-1.5-2.9-2.6.7-.5 1.5-1.1 2.2-1.7l-1.6-1.2z",
          text1: "农历、节假日和调休",
          text2:
            "有了农历、节假日和调休，你就能在日历视图里更方便的安排任务，合理调整工作节奏。",
          show: false,
        },
      ],
      Box5ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/calendar.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/subscribe.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/lunar.png",
      ],
      Box5Index: 0,
      Box5Show: false,
      //box6
      Box6List: [
        {
          id: 1,
          path: "M20.8 7.9c1 .2 1.9.7 2.9 1.7 1.4 1.5 2.3 3.5 2.3 6.1C26 22 21.1 26 15 26S4 22 4 15.7c0-2.6.8-4.6 2.3-6.1 1-1 1.9-1.5 2.9-1.7-.4.4-1.5 2.9-1 4.8 1.4-1.5 4-3.5 6.8-3.5s5.4 2 6.8 3.5c.5-1.9-.6-4.4-1-4.8zm.5-3.3s-.4 2-1.9 2.7c-.2.1-.5.2-.8.3 1.1.9 1.5 2.2 1.5 2.2C19.1 8.9 17 8 15 8c-2 0-4.2.9-5.1 1.8 0 0 .4-1.3 1.5-2.3-.3-.1-.6-.2-.8-.3-1.5-.6-1.9-2.6-1.9-2.6S10 6 12.7 6c.7 0 1.1.1 1.5.2 0-1.2.1-1.9.6-2.1l2.2.7s-1.2.4-1.3 1.4c.3-.1.8-.2 1.7-.2 2.6 0 3.9-1.4 3.9-1.4zm-2.8 13.8c.2-.1.3-.2.4-.4.3-.5.1-1.1-.4-1.4l-5-2.8c-.1-.1-.3-.1-.5-.1-.6 0-1 .4-1 1v5.6c0 .2 0 .3.1.5.3.5.9.7 1.4.4l5-2.8z",
          text1: "番茄计时",
          text2:
            "使用番茄工作法，在“25分钟工作、5分钟休息”的节奏中，集中精力搞定一件事。",
          show: false,
        },
        {
          id: 2,
          path: "M14 18.5v-12c0-.3-.2-.5-.5-.5s-.5.2-.5.5v13c0 1.4-1.1 2.5-2.5 2.5S8 20.9 8 19.5v-6c0-.3-.2-.5-.5-.5s-.5.2-.5.5v2C7 16.9 5.9 18 4.5 18H2v-2h2.5c.3 0 .5-.2.5-.5v-2C5 12.1 6.1 11 7.5 11s2.5 1.1 2.5 2.5v6c0 .3.2.5.5.5s.5-.2.5-.5v-13C11 5.1 12.1 4 13.5 4S16 5.1 16 6.5v17c0 .3.2.5.5.5s.5-.2.5-.5v-13C17 9.1 18.1 8 19.5 8S22 9.1 22 10.5V18c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-1.1.9-2 2-2h3v2h-3v3c0 1.4-1.1 2.5-2.5 2.5S20 19.4 20 18v-7.5c0-.3-.2-.5-.5-.5s-.5.2-.5.5v13c0 1.4-1.1 2.5-2.5 2.5S14 24.9 14 23.5v-5z",
          text1: "白噪音",
          text2:
            "为了帮助你在每个番茄工作时间中都更加专注，滴答清单带来了多种番茄白噪音，为你营造舒心而集中的工作环境。",
          show: false,
        },
      ],
      Box6ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/pomo.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/white-noise.png",
      ],
      Box6Index: 0,
      Box6Show: false,
      //box7
      Box7List: [
        {
          id: 1,
          path: "M9.4 6.1L11 8.7c-2 1.3-3.3 3.4-3.5 5.8v.5h-3v-.7c.2-3.4 2.1-6.4 4.9-8.2zm.8 18.3l1.4-2.7c1 .5 2.2.8 3.4.8.9 0 1.9-.2 2.7-.5l1.1 2.8c-1.2.5-2.5.7-3.8.7-1.7 0-3.3-.4-4.8-1.1zm15.3-8.9l-3-.1v-.3c0-2.6-1.3-5-3.5-6.4l1.6-2.5c3 1.9 4.9 5.2 4.9 8.9v.4zM15 9c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zM8 22c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm14 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z",
          text1: "共享清单",
          text2:
            "无论是与同事们协作完成某个工作项目，还是和家人朋友一起制定周末出游计划，你们都能共享清单，一起记录和完成任务。",
          show: false,
        },
        {
          id: 2,
          path: "M16 19.8l2.2 2.2 1.4-1.4-3.8-3.8c-.4-.4-1-.4-1.4 0l-3.8 3.8L12 22l2-2.1V25h2v-5.2zM20 9c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.2 5 5zM7.7 26H6.2c-.7 0-1.2-.6-1.2-1.4v-3.3c0-1.3.4-2.5 1.3-3.3 1.4-1.3 3.9-3 8.7-3s7.2 1.7 8.6 3c.8.8 1.4 2 1.4 3.3v3.3c0 .8-.5 1.4-1.2 1.4H7.7z",
          text1: "分配任务",
          text2:
            "在共享清单中，明确每一个任务的责任人，并将这个任务分配给对应的成员，令每一个成员都明确自己的任务和目标。",
          show: false,
        },
        {
          id: 3,
          path: "M16.5 14h2.2c.7 0 1.2.6 1.2 1.2s-.6 1.2-1.2 1.2H14v-6.2c0-.6.6-1.2 1.2-1.2s1.2.6 1.2 1.2V14zm-11.7-.4c.7-5 5-8.8 10.2-8.8 5.7 0 10.2 4.6 10.2 10.2 0 5.7-4.6 10.2-10.2 10.2h-1.2v-2.5H15c4.3 0 7.8-3.5 7.8-7.8S19.3 7.1 15 7.1c-3.7 0-6.8 2.6-7.6 6l1.2-1.2 1.8 1.8-3.5 3.5c-.5.5-1.3.5-1.8 0l-3.5-3.3 1.8-1.8 1.4 1.5z",
          text1: "任务动态",
          text2:
            "你可以在任务动态中找到每一步操作的责任人，同时，也可以查询任务从创建之初到被完成时的所有改动。",
          show: false,
        },
        {
          id: 4,
          path: "M7.5 14V8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v3H25V8c0-1.7-1.3-3-3-3H8C6.3 5 5 6.3 5 8v6h2.5zm0 0V8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v3H25V8c0-1.7-1.3-3-3-3H8C6.3 5 5 6.3 5 8v6h2.5zm15 3H25v5c0 1.7-1.3 3-3 3H8c-1.7 0-3-1.3-3-3v-2h2.5v2c0 .3.2.5.5.5h14c.3 0 .5-.2.5-.5v-5zm2.5 0v5c0 1.7-1.3 3-3 3H8c-1.7 0-3-1.3-3-3v-2h2.5v2c0 .3.2.5.5.5h14c.3 0 .5-.2.5-.5v-5H25zm-11.8-2.8l-2.5 4.1H4v-2.5h5.3l3.5-5.9 5 6 2-3.1H26v2.5h-4.8l-3 4.9-5-6z",
          text1: "清单动态",
          text2:
            "如果你是项目负责人，可能需要了解项目内所有成员和所有事情的进展，那么，清单动态正好能满足所需，谁做了什么一目了然。",
          show: false,
        },
      ],
      Box7ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/share.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/assign.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/task-activity.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/list-activity.png",
      ],
      Box7Index: 0,
      Box7Show: false,
      //box8
      Box8List: [
        {
          id: 1,
          path: "M15 25C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10zm-.2-5.8c.1-.1.3-.1.5 0l2.3 1.2c.2.1.4.1.6.1.5-.1.9-.6.8-1.2l-.4-2.6c0-.2 0-.3.1-.4l1.9-1.8c.2-.2.3-.4.3-.6.1-.5-.3-1.1-.8-1.1l-2.6-.4c-.2 0-.3-.1-.4-.3l-1.2-2.3c-.1-.2-.3-.4-.5-.5-.5-.2-1.1 0-1.3.5L13 12.1c-.1.2-.3.3-.4.3l-2.6.4c-.2 0-.4.1-.6.3-.4.4-.4 1 0 1.4l1.9 1.8c.1.1.2.3.1.4l-.4 2.6c0 .2 0 .4.1.6.3.5.9.7 1.4.4l2.3-1.1z",
          text1: "成就值",
          text2:
            "滴答清单带来了“成就值”，作为衡量进步与否的小工具。你完成更多、专注更多，将获得成就值，但是如果你有所懈怠产生拖延，成就值就会损耗。",
          show: false,
        },
        {
          id: 2,
          path: "M7 16h1c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2zm7-3h1c1.1 0 2 .9 2 2v7c0 1.1-.9 2-2 2h-1c-1.1 0-2-.9-2-2v-7c0-1.1.9-2 2-2zm7 1h1c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-1c-1.1 0-2-.9-2-2v-6c0-1.1.9-2 2-2zm1.5-8H19V4h6c.6 0 1 .4 1 1v6h-2V8.1L20.7 12l-.1.1c-.9.9-2.3.9-3.2 0l-4.5-4.4-8.1 7.2-1.6-1.8 8.3-7.4c.9-.8 2.2-.8 3.1.1l4.4 4.4L22.5 6z",
          text1: "统计",
          text2:
            "你可以查看每周的“完成率”和“最佳工作日”，在“最近已完成”了解近期取得的成果，通过“最佳专注时段”找到注意力最集中的时间段。",
          show: false,
        },
        {
          id: 3,
          path: "M19.2 25H8c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v13.2c0 .5-.2 1-.6 1.4l-2.8 2.8c-.4.4-.9.6-1.4.6zM9 9v2h12V9H9zm0 4v2h12v-2H9zm0 4v2h6v-2H9zm9 5.8c0 .1.1.3.1.4.2.2.5.2.7 0l3.3-3.3c.1-.1.1-.2.1-.4 0-.3-.2-.5-.5-.5h-3.3c-.3 0-.5.2-.5.5v3.3z",
          text1: "摘要",
          text2:
            "摘要可以帮助你了解一段时间内所有事情的状态，你可以看到哪些事情已经搞定、哪些事情仍在进行、哪些事情尚未完成，配合多种筛选条件、排序方式，你可以根据习惯进行回顾和复盘。",
          show: false,
        },
      ],
      Box8ImageList: [
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/score.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/statistics.png",
        "https://cncdn.dida365.com/sites/res/features/dida/feature@2/summary.png",
      ],
      Box8Index: 0,
      Box8Show: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    changeBox2Li(index) {
      this.Box2List.map((item) => {
        return (item.show = false);
      });
      if (this.Box2List[index].show === false) {
        this.Box2List[index].show = true;
      }
      this.Box2Index = this.Box2List[index].id - 1;
    },
    changeBox3Li(index) {
      this.Box3List.map((item) => {
        return (item.show = false);
      });
      if (this.Box3List[index].show === false) {
        this.Box3List[index].show = true;
      }
      this.Box3Index = this.Box3List[index].id - 1;
    },
    changeBox4Li(index) {
      this.Box4List.map((item) => {
        return (item.show = false);
      });
      if (this.Box4List[index].show === false) {
        this.Box4List[index].show = true;
      }
      this.Box4Index = this.Box4List[index].id - 1;
    },
    changeBox5Li(index) {
      this.Box5List.map((item) => {
        return (item.show = false);
      });
      if (this.Box5List[index].show === false) {
        this.Box5List[index].show = true;
      }
      this.Box5Index = this.Box5List[index].id - 1;
    },
    changeBox6Li(index) {
      this.Box6List.map((item) => {
        return (item.show = false);
      });
      if (this.Box6List[index].show === false) {
        this.Box6List[index].show = true;
      }
      this.Box6Index = this.Box6List[index].id - 1;
    },
    changeBox7Li(index) {
      this.Box7List.map((item) => {
        return (item.show = false);
      });
      if (this.Box7List[index].show === false) {
        this.Box7List[index].show = true;
      }
      this.Box7Index = this.Box7List[index].id - 1;
    },
    changeBox8Li(index) {
      this.Box8List.map((item) => {
        return (item.show = false);
      });
      if (this.Box8List[index].show === false) {
        this.Box8List[index].show = true;
      }
      this.Box8Index = this.Box8List[index].id - 1;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  padding-top: 72px;
  .box1 {
    background-color: #fff;
    width: 100%;
    height: 760px;
    display: flex;
    flex: nowrap;
    padding-top: 100px;

    .box1-left {
      width: 537px;
      height: 268px;
      padding-left: 50px;

      .box1-1 {
        margin-right: 40px;
        text-align: left;
        line-height: 1.5;
        font-size: 60px;
        font-weight: 600;
      }

      .box1-2 {
        margin-right: 40px;
        font-size: 19px;
        line-height: 32px;
        max-width: 471px;
        margin-top: 24px;
      }
    }

    .box1-right {
      width: 537px;
      height: 414px;
    }
  }

  .box2 {
    background-color: #fafafa;
    width: 100%;
    height: 760px;
    display: flex;
    flex: nowrap;

    .box2-left {
      width: 572px;
      height: 660px;
      padding-left: 180px;
      padding-top: 120px;

      .box2-image {
        width: 316px;
        height: 580px;
      }
    }

    .box2-right {
      width: 572px;
      height: 850px;
      padding-top: 208px;

      .box2-text1 {
        font-size: 36px;
        font-weight: 600;
      }

      .box2-ul {
        width: 572px;
        height: 311px;
        .box2-li {
          display: flex;
          margin-top: 20px;
          padding-top: 10px;
          .box2-svg {
            width: 30px;
            height: 30px;
            margin-right: 15px;
            margin-top: 2px;
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            box-sizing: border-box;
            .box2-p {
              box-sizing: border-box;
              width: 30px;
              height: 30px;
            }
          }

          .box2-svg:hover {
            cursor: pointer;
            fill: #4772fa;
          }
          .box2-ul-text {
            display: flex;
            flex-direction: column;

            .box2-ul-text1 {
              font-size: 20px;
              line-height: 34px;
              font-weight: 700;
            }

            .box2-ul-text2 {
              display: inline;
              line-height: 28px;
              margin-top: 11px;
            }
          }
        }
        .box2-li:hover {
          background-color: #f0f0f0;
          .box2-svg {
            cursor: pointer;
            fill: #4772fa;
          }
        }
        .box2-li:active {
          .box2-svg {
            fill: #4772fa;
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
  .box3 {
    background-color: #fff;
    width: 100%;
    height: 760px;
    display: flex;
    flex: nowrap;

    .box3-right {
      width: 572px;
      height: 660px;
      padding-left: 180px;
      padding-top: 120px;

      .box3-image {
        width: 316px;
        height: 580px;
      }
    }

    .box3-left {
      width: 572px;
      height: 850px;
      padding-top: 208px;
      padding-left: 100px;
      .box3-text1 {
        font-size: 36px;
        font-weight: 600;
      }

      .box3-ul {
        width: 572px;
        height: 311px;
        .box3-li {
          display: flex;
          margin-top: 20px;
          padding-top: 10px;
          .box3-svg {
            width: 30px;
            height: 30px;
            margin-right: 15px;
            margin-top: 2px;
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            box-sizing: border-box;
            .box3-p {
              box-sizing: border-box;
              width: 30px;
              height: 30px;
            }
          }

          .box3-svg:hover {
            cursor: pointer;
            fill: #4772fa;
          }
          .box3-ul-text {
            display: flex;
            flex-direction: column;

            .box3-ul-text1 {
              font-size: 20px;
              line-height: 34px;
              font-weight: 700;
            }

            .box3-ul-text2 {
              display: inline;
              line-height: 28px;
              margin-top: 11px;
            }
          }
        }
        .box3-li:hover {
          background-color: #f0f0f0;
          .box3-svg {
            cursor: pointer;
            fill: #4772fa;
          }
        }
        .box3-li:active {
          .box3-svg {
            fill: #4772fa;
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
  .foot1 {
    width: 100%;
    height: 531px;
    background-color: #fff;
    align-items: center;
    text-align: center;
    padding-left: 50px;
    .foot1-text1 {
      font-size: 60px;
      font-weight: 600;
      width: 90%;
      height: 84px;
      line-height: 84px;
      color: #000;
      padding-top: 100px;
      box-sizing: border-box;
    }
    .foot1-text2 {
      width: 692px;
      height: 64px;
      font-size: 18px;
      line-height: 32px;
      margin-top: 115px;
      margin-left: 250px;
    }
    .foot1-button {
      height: 3.4em;
      line-height: 3.4em;
      width: 252px;
      margin-top: 62px;
      font-weight: 700;
      background-color: #4772fa;
      color: #fff;
      font-size: 20px;
      padding: 0 10px;
      text-align: center;
      display: inline-block;
      border-radius: 6px;
    }
  }
}
</style>
